<template>
  <div>
    <el-breadcrumb separator="/">
      <el-breadcrumb-item>试卷管理</el-breadcrumb-item>
      <el-breadcrumb-item>试卷生成</el-breadcrumb-item>
    </el-breadcrumb>
    <br><br>
    <el-form :inline="true" :model="paperForm" class="demo-form-inline">
      <el-form-item label="试卷名称">
        <el-input v-model="paperForm.paperName" placeholder="试卷名称"></el-input>
      </el-form-item>

      <el-form-item label="试卷时长">
        <el-select v-model="paperForm.paperTime" placeholder="试卷时长">
          <el-option label="2小时" value="120"></el-option>
          <el-option label="1小时" value="60"></el-option>
          <el-option label="1.5小时" value="90"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="试卷总分">
        <el-select v-model="paperForm.paperScore" placeholder="试卷总分">
          <el-option label="100分" value="100"></el-option>
          <el-option label="120分" value="120"></el-option>
          <el-option label="150分" value="150"></el-option>
        </el-select>
      </el-form-item>

    </el-form>

    <el-table :data="list" style="width: 100%" @selection-change="getSelect" :row-key="rowSelect">
      <el-table-column type="selection" :reserve-selection="true"></el-table-column>
      <el-table-column prop="quId" label="编号" width="300"></el-table-column>
      <el-table-column prop="quContent" label="题干" width="300"></el-table-column>
      <el-table-column prop="quType" label="题型" width="180"></el-table-column>
      <el-table-column prop="quScore" label="分数" width="180"></el-table-column>
    </el-table>

    <!--分页插件-->
    <div class="block">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryForm.page"
        :page-sizes="[5, 10, 15]"
        :page-size="queryForm.row"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </div>

    <div align="center">
          <el-button type="success" size="mini" @click="add">试卷新增</el-button>
    </div>
  </div>

</template>

<script>
  export default {
    name: "PaperCreate",
    data(){
      return{
        list:[],
        queryForm:{
          page:1,
          row:5
        },
        paperForm:{//试卷表单
          paperName:"",
          paperTime:"",
          paperScore:"",
          quIds:""
        },//试卷表单对象
        total:0,//总条数
        totalPage:0//总页数

      }
    },
    methods:{
      add(){//试卷新增
        var self = this;
        //发送ajax请求
        this.$http.post("/paper-info/add",this.$qs.stringify(this.paperForm)).then(function (rs) {
          self.$alert(rs.data.msg);
          if(rs.data.code==200){
            //预览试卷
            self.$confirm("是否预览试卷","试题提示").then(function () {
              //跳转到预览试卷页面
              self.$router.push({"name":"PaperShow",query:self.paperForm})

            }).catch(function () {

            })
          }else{

          }
        })
      },
      loadData(){//加载试题列表
        var self = this;
        //发送ajax请求
        this.$http.post("/paper-question/paper/query",this.$qs.stringify(this.queryForm)).then(function (rs) {
          if(rs.data.code==200){
            self.list = rs.data.data.list;
            self.total = rs.data.data.total;
            self.totalPage = rs.data.data.totalPage;
          }else{
            //清空
            self.list=[];
          }
        })
      },
      handleSizeChange(row){ //下来框触发的事件
        //更改当前查询的每页显示条数
        this.queryForm.row = row;
        //刷新
        this.loadData();
      },
      handleCurrentChange(v){ //页码触发的事件
        //更改当期查询的页码
        this.queryForm.page=v;
        //刷新
        this.loadData();
      },
      getSelect(v){//表格复选框选中触发的事件
        var s ="";
        for(var i=0;i<v.length;i++){
            s+=v[i].quId+",";
        }
        this.paperForm.quIds=s;
      },
      rowSelect(row){
          return row.quId;
      }

    },
    created() {
      this.loadData();
    }

  }
</script>

<style scoped>

</style>
